<template>
  <div style="padding-top:1.5rem;text-align: left">
    <TopNav title="CreditPage.wdxy" show_left="true"></TopNav>
    <div style="background: #efefef;">
      <div id="echart" style="width: 100%;height:9rem;"></div>
    </div>
    <van-cell :title="this.$t('CreditPage.xysm')" @click="handleClickView" :value="this.$t('CreditPage.jl')" is-link/>
    <ol>
      <li>{{ $t('CreditPage.xyjfmglbpgyc') }}</li>
      <li>{{ $t('CreditPage.csyhxyjf') }}: <b>60</b></li>
      <li>{{ $t('CreditPage.rgjcdyhzrwscxjtpytkc') }}: <b>1</b> {{ $t('CreditPage.jf') }},{{ $t('CreditPage.kdsx') }}: <b>7</b> {{ $t('CreditPage.jf') }}</li>
      <li>{{ $t('CreditPage.rgwjcdyhsyxjtpzj') }} <b>1</b> {{ $t('CreditPage.jf') }}</li>
      <li>{{ $t('CreditPage.xyjfdy') }} <b>50</b> {{ $t('CreditPage.jbxztx') }}</li>
      <li>{{ $t('CreditPage.xyjfdy') }} <b>30</b> {{ $t('CreditPage.jrwcsjb') }}</li>
      <li>{{ $t('CreditPage.xyjfxydy') }} <b>0</b> {{ $t('CreditPage.jbfh') }}</li>
    </ol>

  </div>
</template>

<script>
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';
import 'vant/lib/cell/style';
import 'vant/lib/cell-group/style';
import echarts from 'echarts';

Vue.use(Cell);
Vue.use(CellGroup);
import TopNav from "../components/TopNav";

export default {
  name: 'CreditPage',
    components: {
      TopNav,
    },
    data () {
    return {
      data:{
      },
      curr_html:'',
      showHelpDetail:false,
    }
  },
    methods:{
      handleClickView(){
        this.$toast.success(this.$t('CreditPage.zwjl'));
      },
      initEchart(){
          let myChart = echarts.init(document.getElementById('echart'));
          let option = {
              tooltip: {
                  formatter: '{a} <br/>{b} : {c}%'
              },
              toolbox: {
                  // feature: {
                  //     restore: {},
                  //     saveAsImage: {}
                  // }
              },
              series: [
                  {
                      name: this.$t('CreditPage.xyzb'),
                      type: 'gauge',
                      detail: {formatter: '{value}'},
                      data: [{value: 50, name: this.$t('CreditPage.xyzb')}],
                  },
              ]
          };
          option.series[0].data[0].value = 60;
          myChart.setOption(option, true);
      },
      getData(){
          this.$axios.get(this.$api_url.get_help).then((res)=>{
              console.log(res);
              if(res.data){
                  this.data = res.data;
              }
          })
      },
      handleClickViewHelpContent(html){
          this.curr_html = html;
          this.showHelpDetail = true;
      },
    },
    mounted() {
      this.getData();
      this.initEchart();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ol{
    padding: 0.3rem 0rem 0.3rem 0.8rem;
    font-size: 0.4rem;
    list-style: decimal;
  }
</style>
